$ease: cubic-bezier(.2,1,.3,1);

div {
  svg {
    position: absolute;
    width: 30px;
    height: 20px;
    margin: -30px 0px;
    cursor: pointer;
    overflow: visible;
    polygon, path {
      transition: all 0.5s $ease;
    }
    &:hover polygon, &:hover path {
      transition: all 1s $ease;
      fill: #FF4136;
    }

    &:hover .arrow {
      animation: arrow-anim 2.5s $ease infinite;
    }
    &:hover .arrow-fixed {
      animation: arrow-fixed-anim 2.5s $ease infinite;
    }
  }
}

@keyframes arrow-anim {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  5% {
    transform: translateX(-0.1rem);
  }
  100% {
    transform: translateX(1rem);
    opacity: 0;
  }
}

@keyframes arrow-fixed-anim {
  5% {
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}